<template>
  <div class="menu-container">
    <div class="text-wrap" v-for="tag in menuList" :key="tag.path">
      <router-link
        ref="tag"
        :class="isActive(tag) ? 'is_line' : ''"
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
        class="is_text"
      >
        {{ tag.title }}
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftmenu",
  data() {
    return {
      menuList: [
        { title: "智能推荐", path: "/index" },
        { title: "AI一键填报", path: "/aiRecord" },
        { title: "我的志愿表", path: "/mine" },
        { title: "查大学", path: "/college" },
        { title: "查专业", path: "/majors" },
        { title: "一分一段表", path: "/rank" },
        { title: "批次线", path: "/batch" },
      ],
    };
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path;
    },
  },
};
</script>

<style scoped lang="scss">
.menu-container {
  .is_text {
    width: 100%;
    padding-left: 8px;
    color: #606166;
    letter-spacing: 0.56px;
    margin-top: 20px;
    cursor: pointer;
    font-weight: 700;
  }
  .text-wrap {
    padding: 10px;
  }
  .is_line {
    color: #0478f1;
    font-weight: 700;
  }
}
</style>
